<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<title>即时通信</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style type="text/css">
	.maxdiv{
		/*background-color: #EDEDED;*/
		min-height:200px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		padding-top:36px;
	}
	.kuang{
		background-color: #104E8B;
		height:80px;
		padding: 10px;
		align-items: center;
		display: flex;
		border-bottom: 1px solid #fff

	}
	.left{
		border: 1px solid #F2F2F2;
		border-radius: 30px;
		width:60px;
		height: 60px;
		overflow: hidden;
	}
	.right{
		height: 60px;
		padding-left: 20px;
	}
	img{
		width: 100%;
		height: 100%;
	}
	.total{
		position: fixed;
		bottom:10px;
		height:40px;
		background-color: #1C86EE;
		width: 100%;
		text-align: center;
		line-height: 40px;
	}
	.title{
			position: fixed;
			top:0;
			background-color: #1C86EE;
			border-bottom: #009ACD;
			height: 40px;
			width: 100%;
			line-height: 40px;
			text-align: center;
			color: #fff;
			display: flex;
			justify-content: space-between;
		}
	.new{
		width: 40px;
		height: 20px;
		background-color: red;
		border-radius: 5px;
		border: 1px solid red;
		color: #fff;
		font-size: 10px;
		line-height: 20px;
		margin-left: 40%;
		display: none;
		text-align: center;
		animation: myfirst 2s ease 1s infinite alternate;
	}
	@keyframes myfirst {
		from {margin-left: 40%;}
		to {margin-left: 20%;}
	}
</style>
<body style="margin:0">
	<div class="title">
		<div style="width:33.33%;overflow: hidden;" id="username"></div>
		<div style="width:33.33%">消息</div>
		<div style="width:33.33%">在线人数（<span id="pnum">0</span>）</div>
	</div>
	<div class="maxdiv">
		<!-- 好友列表 -->
		<!-- <div class="kuang">
			<div class="left">
				<img src="./QQ20190312-142429@2x.png">
			</div>
			<div class="right">12121212</div>
			<div class="new" style="display: block;">新消息</div>
		</div> -->


	</div>
	<div class="total">在线人数0</div>
</body>
	<script type="text/javascript">
		var qunname = '五年级三班交流群'; qunid = 1000001;
		function appchild(text,id,status){
			var dis = 'none';
			if(status) dis='block';
            return '<div onclick="clickHref('+id+',\''+text+'\')" class="kuang"><div class="left"><img src="./QQ20190312-142429@2x.png"></div><div class="right">'+text+'</div><div class="new" style="display:'+dis+'">新消息</div></div>';

        }
        function jiaoliuqun(){
        	return '<div onclick="clickqun()" class="kuang"><div class="left"><img src="./QQ20190312-142429@2x.png"></div><div class="right">'+qunname+'</div></div>';
        }
        function getQueryString(name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) return decodeURI(r[2]); 
            return null; 
        }
        // 获取id
        var personid = getQueryString('id');
        var name = getQueryString('name');
        if(personid == null || name == null){
            // alert('非法操作');
            throw SyntaxError('非法操作');
        }
        $('#username').text(name);
        if(window.WebSocket){
            var ws = new WebSocket('ws://172.30.9.214:1234');

            ws.onopen = function(e){
                console.log("连接服务器成功");
                ws.send(JSON.stringify({
                    'type':'link',
                    'id':personid,
                    'name':name
                }));
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }

            ws.onmessage = function(e){
                var data = JSON.parse(e.data);
                if(data.type == 'onlinenumber'){
                	console.log(data);
                	var html = jiaoliuqun();
                	for (var i = 0; i < data.lone.length; i++) {
                		if(data.lone[i].id != personid){
                			html += appchild(data.lone[i].name,data.lone[i].id,data.lone[i].tip);
                		}	
                	}
                	$('.maxdiv').text('');
                	$('.maxdiv').append(html);
                	$('.total').text('在线人数' + data.total);
                	$('#pnum').text(data.total);
                    // document.getElementById('total').innerHTML = '在线人数'+data.total;
                }
                var time = new Date();
                
            }
        }

        function clickHref(toid,name1){
        	// window.open('/onotone?id='+personid+'&toid='+toid+'&name='+name, '_blank');
        	location.href = '/onetoone.html?id='+personid+'&toid='+toid+'&name='+name1+'&iname='+name;
        }
        function clickqun(){
        	location.href = '/qun.html?id='+personid+'&name='+name+'&qunname='+qunname+'&qunid='+qunid;
        }


	</script>
</html>